<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>搜索</title>


    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <link rel="stylesheet" href="/static/mui/css/mui.min1.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
    <script src="/static/js/vue.js"></script>
    <link href="/static/mui/css/mui.css" rel="stylesheet"/>
    <style>
        .headTitle {
            position: fixed;
            border: 1px solid #f4f4f4;
            border-top: none;
            border-left: none;
            border-right: none;
            background: #fff;
            width: 100%;
            height: 44px;
            line-height: 44px;
        }
        .head {
            position: absolute;
            width: 100%;
            max-width: 640px;
            right: 0;
            margin: 0 auto;
            height:44px;
            background: rgb(255, 255, 255);
            top: 0;
            left: 0;
            z-index: 3;
        }
        .head .title1 {
            text-align: center;
            font-size: 17px;
            margin: 0 8%;
            font-style: normal;
            font-weight: normal;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 100%;


        }
        .head a img {
            float: left;
            display: block;
            width: 100%;
            width: 10px;
            height: 16px;
            margin-left: 5%;
            margin-top: 14px;
        }
        .workerSearch {
            position: fixed;
            left: 0;
            width: 100%;
            background: #f2f2f2;
        }
        .workerSearch .box {
            max-width: 640px;
            margin: 0 auto;
        }
        .workerSearch .top {
            position: relative;
            background: #fff;
            padding: 1.072rem 0 1.072rem 0;
            border-bottom: 1px solid #E8E8EF;
            overflow: hidden;
        }
        .searchWrap {
            position: relative;
            padding: 0.467rem 5.25rem 0 1.5rem;
            vertical-align: top;
            line-height: 1;
        }
        .searchWrap input {
            width: 100%;
            padding: 0.2rem 1rem 0.2rem 2.143rem;
            line-height: 1.543rem;
            border: 1px solid #D4D4DB;
            border-radius: 0.429rem 0 0 0.429rem;

            font-size: 1rem;
        }
        .searchWrap button {
            position: absolute;
            top: 0.467rem;
            right: 0.858rem;
            width: 3.929rem;
            height: 2.143rem;
            border: none;
            background: #55586D;
            color: #fff;
            border-radius: 0 0.429rem 0.429rem 0;
            font-size: 1rem;
        }
        #img li a img {
            width: 100%;
            height: 130px
        }

        .list_word {
            color: #999999;
            font-size: 13px;
        }

        .list_word1 {
            color: #000;
            font-size: 13px;
        }
    </style>
</head>
<body ontouchstart >
<header class="head headTitle" style="text-align: center;position: fixed;top: 0;">
    <a class="back" href="{:url('/home/seller/myorder')}"><img src="/static/images/back_gray.png" alt="返回"></a>
    <span class="" style="margin-right: 8%">搜索</span>
    <!--商品搜索-->
    <div class="top" style="background-color: #fff">
        <div class="searchWrap" id="box">
            <input type="text" id="in"  placeholder="请输入商品类别" value="">
            <button class="chaxun"  style="height: 39px;background: #fe8200;" type="button" >查询</button>
        </div>
    </div>
</header>
<div id="app"  style="margin-top: 110px">
    <section class="workerBox1">

        <div  v-for="item in items"  class="mui-row"   style="background: #ffffff;margin-top: 5px">
            <div class=" mui-col-xs-5  mui-card-header mui-card-media">
                <img  style="height:25vw;width:35vw; "   :src="item.thumb">
            </div>
            <div class=" mui-col-xs-7  " >
                <div class="mui-card-content-inner">
                    <div class="mui-row">
                        <div class="mui-col-xs-12" style="color: #000000;">{{item.name}}</div>
                        <div class="mui-col-xs-6 list_word">型号：</div>
                        <div class="mui-col-xs-6 list_word1">{{item.xinghao}}</div>
                        <div class="mui-col-xs-6 list_word">材质：</div>
                        <div class="mui-col-xs-6 list_word1">{{item.caizhi}}</div>
                        <div class="mui-col-xs-6 list_word">购买数量：</div>
                        <div class="mui-col-xs-6 list_word1">3</div>
                    </div>
                </div>
            </div>
        </div>


        <div class="weui-loadmore" v-if="is_loading" style="padding-bottom:30px;height:20px;">
            <i class="weui-loading"></i>
            <span class="weui-loadmore__tips">正在加载</span>
        </div>

        <div class="weui-cells__title" v-if="is_none" style="text-align: center;margin-bottom: 20px">无更多数据</div>

    </section>
</div>
<script>
    var shuju="";
    <!--滚动加载-->
    var app = new Vue({
        el: '#app',
        data: {
            //初始化
            items: [],
            is_loading: false,
            is_none: false,
            cur_page: 1,
            limit: 10,
            message:''
        },
        filters:{
            //过滤器
            setCount:function (value) {

                if(value.length>5){
                    return  value.slice(0,5)+"...";
                }
                else{
                    return  value;
                }

            }
        }
    });

    //滚动加载更多
    $('.workerBox1').infinite().on('infinite', function () {
        console.log("加载");
        loadlist();
    });
    $(document).on('click','.chaxun', function () {
        shuju=$('#in').val();
        // console.log(shuju);
        app.cur_page=1;
        app.limit=10;
        loadlist();
    });

    //ajax加载数据
    function loadlist() {

        if (!app.is_loading ) {
            app.is_loading = true;
            app.is_none = false;
            console.log(shuju);
            $.post('search', {page: app.cur_page, limit: app.limit,shuju:shuju}, function (res) {
                console.log(res);
                app.is_loading = false;
                if (res.count > 0 &&res!=[]) {
                    app.message="";
                    $('.workerBox1').show();
                    if(app.cur_page==1){
                        app.items=res.data;
                    }else {
                        for (var index in res.data) {
                            app.items.push(res.data[index]);
                        }
                    }
                    app.cur_page++;
                }
                else {
                    app.is_loading = false;
                    app.is_none = true;

                }
                if(res==[]){
                    $('.result').hide();
                    app.message="抱歉，暂无相关信息！";
                    app.is_loading = false;
                    app.is_none = false;

                }
                else {
                    app.is_loading = false;
                    app.is_none = true;

                }


            });
        }

    }
//    <!--商品详情-->
//    function spxq(that) {
//        console.log("232");
//        var id=$(that).attr('data_id');
//        var s="spxq/id/"+id;
//        location.href=s;
//    }
</script>

</body>
</html>